import React, { useState } from 'react';
import { Typography, Container, Paper, Box, Grid, Divider, Button } from '@mui/material';
import { FileSelector, SyncStatusIndicator, ImportButton } from './index.ts';
import { useFileSync } from '../../hooks/fileSystem/index.ts';
import { useNovel } from '../../context/NovelContext.tsx';

/**
 * 文件系统功能测试页面
 * 提供文件系统导入和同步功能的测试界面
 */
const TestImportPage: React.FC = () => {
    const { syncState, selectRootFolder, scanFolder, importNovelStructure } = useFileSync();
    const { novels, importFromFileSystem, linkNovelToFolder, syncWithFileSystem } = useNovel();
    const [scanResult, setScanResult] = useState<any>(null);
    const [convertResult, setConvertResult] = useState<any>(null);

    // 测试扫描文件夹
    const handleTestScan = async () => {
        try {
            const result = await selectRootFolder();
            if (result && result.folder) {
                const structure = await scanFolder(result.folder);
                setScanResult(structure);
            }
        } catch (error) {
            console.error('扫描失败', error);
        }
    };

    // 测试转换为小说结构
    const handleTestConvert = async () => {
        try {
            const novelStructure = await importNovelStructure();
            setConvertResult(novelStructure);
        } catch (error) {
            console.error('转换失败', error);
        }
    };

    return (
        <Container maxWidth="lg" sx={{ py: 4 }}>
            <Typography variant="h4" gutterBottom>
                小说文件系统同步测试
            </Typography>
            <Typography variant="body1" paragraph>
                此页面用于测试文件系统导入和同步功能。您可以选择一个包含小说文件的文件夹，然后测试扫描、导入和同步功能。
            </Typography>

            <Grid container spacing={3}>
                {/* 功能区 */}
                <Grid item xs={12}>
                    <Paper sx={{ p: 2 }}>
                        <Typography variant="h6" gutterBottom>
                            操作区
                        </Typography>
                        <Box sx={{ display: 'flex', gap: 2, flexWrap: 'wrap', alignItems: 'center' }}>
                            <FileSelector buttonVariant="both" variant="contained" label="选择小说文件夹" showStatus={true} />
                            <SyncStatusIndicator />
                            <ImportButton />
                            <Button variant="outlined" onClick={handleTestScan}>
                                测试扫描
                            </Button>
                            <Button variant="outlined" onClick={handleTestConvert}>
                                测试转换
                            </Button>
                        </Box>
                    </Paper>
                </Grid>

                {/* 状态区 */}
                <Grid item xs={12} md={6}>
                    <Paper sx={{ p: 2, height: '100%' }}>
                        <Typography variant="h6" gutterBottom>
                            当前同步状态
                        </Typography>
                        <Typography variant="body2">
                            状态: {syncState.status}
                        </Typography>
                        <Typography variant="body2">
                            根文件夹: {syncState.rootFolder ? syncState.rootFolder.name : '未选择'}
                        </Typography>
                        <Typography variant="body2">
                            上次同步: {syncState.lastSynced ? new Date(syncState.lastSynced).toLocaleString() : '无'}
                        </Typography>
                        <Typography variant="body2">
                            同步启用: {syncState.syncEnabled ? '是' : '否'}
                        </Typography>
                        {syncState.error && (
                            <Typography variant="body2" color="error">
                                错误: {syncState.error}
                            </Typography>
                        )}
                    </Paper>
                </Grid>

                {/* 小说列表 */}
                <Grid item xs={12} md={6}>
                    <Paper sx={{ p: 2, height: '100%' }}>
                        <Typography variant="h6" gutterBottom>
                            当前小说列表
                        </Typography>
                        {novels.length === 0 ? (
                            <Typography variant="body2">
                                暂无小说。请使用导入功能添加小说。
                            </Typography>
                        ) : (
                            <Box>
                                {novels.map((novel) => (
                                    <Box key={novel.id} sx={{ mb: 1 }}>
                                        <Typography variant="subtitle1">
                                            {novel.name} {novel.fileHandle ? '(已链接)' : '(未链接)'}
                                        </Typography>
                                        {novel.fileHandle && (
                                            <Button
                                                size="small"
                                                variant="outlined"
                                                onClick={() => syncWithFileSystem(novel.id)}
                                            >
                                                同步
                                            </Button>
                                        )}
                                        {!novel.fileHandle && (
                                            <Button
                                                size="small"
                                                variant="outlined"
                                                onClick={() => linkNovelToFolder(novel.id)}
                                            >
                                                链接文件夹
                                            </Button>
                                        )}
                                    </Box>
                                ))}
                            </Box>
                        )}
                    </Paper>
                </Grid>

                {/* 扫描结果 */}
                {scanResult && (
                    <Grid item xs={12}>
                        <Paper sx={{ p: 2 }}>
                            <Typography variant="h6" gutterBottom>
                                扫描结果
                            </Typography>
                            <Divider sx={{ my: 1 }} />
                            <Box sx={{ maxHeight: '300px', overflow: 'auto' }}>
                                <pre>{JSON.stringify(scanResult, null, 2)}</pre>
                            </Box>
                        </Paper>
                    </Grid>
                )}

                {/* 转换结果 */}
                {convertResult && (
                    <Grid item xs={12}>
                        <Paper sx={{ p: 2 }}>
                            <Typography variant="h6" gutterBottom>
                                转换结果
                            </Typography>
                            <Divider sx={{ my: 1 }} />
                            <Box sx={{ maxHeight: '300px', overflow: 'auto' }}>
                                <pre>{JSON.stringify(convertResult, null, 2)}</pre>
                            </Box>
                        </Paper>
                    </Grid>
                )}
            </Grid>
        </Container>
    );
};

export default TestImportPage; 